<template>
  <div class="global_order marginTop10">
    <div class="main_white padding10 paddingTop0">
      <div class="main_ti">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全局配置" name="0"></el-tab-pane>
          <el-tab-pane label="订单配置" name="1"></el-tab-pane>
          <el-tab-pane label="商品配置" name="2"></el-tab-pane>
          <el-tab-pane label="库房配置" name="3"></el-tab-pane>
          <el-tab-pane label="用户配置" name="4"></el-tab-pane>
          <el-tab-pane label="采购配置" name="5"></el-tab-pane>
          <el-tab-pane label="财务配置" name="6"></el-tab-pane>
        </el-tabs>

        <div class="mainua_form marginTop20">
          <!-- 全局配置 -->
          <el-form
            :model="overall_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="180px"
            v-if="activeName == 0"
          >
            <el-form-item class="flex_center" prop="show_member_code">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">显示用户编码</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >显示用户编码：
              </span>
              <el-switch
                v-model="overall_form.show_member_code"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="show_sku_code">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，创建订单添加商品等，执行检索商品，结果中SKU编码会显示在名称下方
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >显示SKU编码：
              </span>
              <el-switch
                v-model="overall_form.show_sku_code"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item
              class="flex_center"
              prop="order_number_generation_rule "
            >
              <span slot="label"> 单据号生成规则： </span>
              <el-checkbox-group
                v-model="overall_form.order_number_generation_rule"
              >
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 1)"
                  >顺序生成</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 1)"
                  >随机生成</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="cost_entry_rule ">
              <span slot="label"> 成本录入规则： </span>
              <el-checkbox-group v-model="overall_form.cost_entry_rule">
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 5)"
                  >分拣录入</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 5)"
                  >发货录入</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="register_pay_type">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    截取,直接去掉第二位小数，<br />
                    进位,根据四舍五入判断是否进位
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                分拣保留小数：
              </span>
              <el-checkbox-group v-model="overall_form.sorting_decimal_places">
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 9)"
                  >保留两位</el-checkbox
                >
                <el-checkbox
                  :label="2"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(2, 9)"
                  >保留一位（截取）</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20"
                  @change="checkboxGroup(1, 9)"
                  >保留一位（进位）</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
          <!-- 订单配置 -->
          <el-form
            :model="order_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="200px"
            v-if="activeName == 1"
          >
            <el-form-item class="flex_center" prop="createTime">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">大于等于0的正整数</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >商城配送日期：
              </span>
              可选范围相对明天后退
              <el-input-number
                v-model="order_form.send_time_back_days"
                :min="0"
                :controls="false"
                :precision="0"
                style="margin: 0 10px; width: 100px"
              ></el-input-number
              >天
            </el-form-item>
            <el-form-item class="flex_center" prop="createTime">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">移动端每天开始下单与结束下单时间段！</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >商城允许下单时间段：
              </span>
              <el-time-picker
                is-range
                v-model="createTime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item class="flex_center" prop="starting_price">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    商城用户下单，订单金额必须大于等于设置金额
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >商城起定金额：
              </span>
              <el-input
                v-model="order_form.starting_price"
                placeholder="请输入商城起定金额"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item class="flex_center" prop="base_delivery_fee">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    没有单独设置运费金额的用户，默认调用基础运费金额
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >基础运费金额：
              </span>
              <el-input
                v-model="order_form.base_delivery_fee"
                placeholder="请输入商城起定金额"
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item class="flex_center" prop="fare_delivery_fee">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">订单金额大于等于设置金额，免运费</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >免运费订单金额：
              </span>
              <el-input
                v-model="order_form.fare_delivery_fee"
                placeholder="请输入商城起定金额"
              ></el-input>
            </el-form-item> -->

            <el-form-item class="flex_center" prop="check_designated_inventory">
              <span slot="label"> 后台下单验证指定库存： </span>
              <el-switch
                v-model="order_form.check_designated_inventory"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="allow_add_sold_out">
              <span slot="label"> 后台允许添加下架商品： </span>
              <el-switch
                v-model="order_form.allow_add_sold_out"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="use_recent_remark">
              <span slot="label"> 商品自动调用近一次备注： </span>
              <el-switch
                v-model="order_form.use_recent_remark"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>

            <el-form-item class="flex_center" prop="order_goods_sort">
              <span slot="label"> 订单商品排序： </span>
              <el-checkbox-group v-model="order_form.order_goods_sort">
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 2)"
                  >商品添加顺序</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 2)"
                  >按分类排序</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="order_audit">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，用户自主提交的货到付款订单需平台审核
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >货到付款订单需审核：
              </span>
              <el-switch
                v-model="order_form.order_audit"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="return_audit">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">开启后，后台创建的退货单也需要审核</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >后台创建订单退货需审核：
              </span>
              <el-switch
                v-model="order_form.return_audit"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="new_order_voice_switch">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，客户端用户自主提交的订单，后台有语音提醒，系统提供可选语音
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >新订单语音提醒：
              </span>
              <el-switch
                v-model="order_form.new_order_voice_switch"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                active-color="#03A98E"
              ></el-switch>
            </el-form-item>
            <!-- 语音提醒 -->
            <audio
              :controls="true"
              :autoplay="autoplay"
              ref="audio"
              :key="audioSrc"
              hidden
            >
              <source :src="audioSrc" type="audio/mpeg" />
              您不支持播放
            </audio>
            <el-form-item
              class="flex_center"
              label=" "
              label-width="80px"
              prop="use_yuyi"
              v-if="order_form.new_order_voice_switch"
            >
              <el-checkbox-group v-model="order_form.new_order_voice_alert">
                <el-checkbox
                  v-for="(yuyi, index) in yuyi"
                  :key="index"
                  :label="yuyi.url"
                  :class="[{ marginLeft20: index != 0 }, ' marginRight0']"
                  @change="checkboxGroup(yuyi.url, 3)"
                  >{{ yuyi.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
          <!-- 商品配置 -->
          <el-form
            :model="commodity_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="180px"
            v-if="activeName == 2"
          >
            <!-- <el-form-item class="flex_center" prop="show_sku_code">
              <span slot="label"> 自动水印： </span>
              <el-switch
                v-model="commodity_form.auto_watermark"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item> -->
            <el-form-item class="flex_center" prop="look_goods_detail">
              <span slot="label"> 未登录查看价格： </span>
              <el-switch
                v-model="commodity_form.look_goods_detail"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="offer_benchmark_price ">
              <span slot="label"> 分组报价基准价： </span>
              <el-checkbox-group v-model="commodity_form.offer_benchmark_price">
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 6)"
                  >采购价</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 6)"
                  >库存价</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="offer_benchmark_price ">
              <span slot="label"> 售价&lt;=0禁止售卖： </span>
              <el-switch
                v-model="commodity_form.less_zero_forbid_sale"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <!-- <el-form-item class="flex_center" prop="show_sku_code">
              <span slot="label"
                ><el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">开启后，可查看商品的详情页</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >查看详情：
              </span>
              <el-switch
                v-model="commodity_form.look_goods_detail"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item> -->
            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
          <!-- 库房配置 -->
          <el-form
            :model="warehouse_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="180px"
            v-if="activeName == 3"
          >
            <el-form-item class="flex_center" prop="storage_audit">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">开启后，所有入库必须审核</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >审核入库：
              </span>
              <el-switch
                v-model="warehouse_form.storage_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="loss_stock">
              <span slot="label"> 发货出库允许负库存： </span>
              <el-switch
                v-model="warehouse_form.loss_stock"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="inventory_sheet_audit">
              <span slot="label"> 盘点单需审核： </span>
              <el-switch
                v-model="warehouse_form.inventory_sheet_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="reported_spills_audit">
              <span slot="label"> 库存调整需审核： </span>
              <el-switch
                v-model="warehouse_form.reported_spills_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <!-- <el-form-item class="flex_center" prop="is_batch">
              <span slot="label"> 批次管理： </span>
              <el-switch
                v-model="warehouse_form.is_batch"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item> -->
            <!-- <el-form-item class="flex_center" prop="inventory_allocation_audit">
              <span slot="label"> 库存调拨需审核： </span>
              <el-switch
                v-model="warehouse_form.inventory_allocation_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item> -->
            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>

          <el-form
            :model="user_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="180px"
            v-if="activeName == 4"
          >
            <el-form-item class="flex_center" prop="register_audit">
              <span slot="label"> 商城注册审核： </span>
              <el-switch
                v-model="user_form.register_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="register_pay_type">
              <span slot="label"> 注册支付方式： </span>
              <!-- <el-switch
                v-model="user_form.register_pay_type"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch> -->
              <el-checkbox-group v-model="user_form.register_pay_type">
                <el-checkbox
                  :label="2"
                  class="marginRight0"
                  @change="checkboxGroup(2, 8)"
                  >全部</el-checkbox
                >
                <el-checkbox
                  :label="0"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(0, 8)"
                  >货到付款</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20"
                  @change="checkboxGroup(1, 8)"
                  >在线支付</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="open_points">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，用户账单结算完成后，会获得对应积分
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >积分：
              </span>
              <el-switch
                v-model="user_form.open_points"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
              <div class="center">
                <div class="points_switch_box" v-show="user_form.open_points">
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      修改后原用户获得积分不变，请谨慎修改
                    </div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                  消费
                  <el-input-number
                    v-model.trim="user_form.money_points_ratio"
                    placeholder="优惠金额"
                    :min="0"
                    :precision="0"
                    :controls="false"
                  ></el-input-number
                  >= 1积分
                </div>
              </div>
            </el-form-item>

            <el-form-item class="flex_center" prop="credit_status">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，提交订单（含后台）时当欠款达到预设额度，将警告或不能下单
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >信用金：
              </span>
              <el-switch
                v-model="user_form.credit_status"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <div v-if="user_form.credit_status">
              <el-form-item prop="credit">
                <span slot="label">
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      新用户注册（含后台创建、导入）默认信用金额度
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >信用金默认额度：
                </span>

                <el-input
                  placeholder="请输入默认信用金"
                  v-model="user_form.credit"
                  class="wid400"
                ></el-input
                >&nbsp;元
              </el-form-item>
              <el-form-item prop="credit_notice">
                <span slot="label">
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      当用户欠款额度达到提醒预设比例后，每次下单都会提醒信用金使用情况
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >超额提醒：
                </span>
                <el-input
                  placeholder="信用金提醒额度"
                  v-model="user_form.credit_notice"
                  class="wid400"
                ></el-input>
                <span>&nbsp;%</span>
              </el-form-item>
              <el-form-item prop="forbid_order">
                <span slot="label">
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      当用户欠款额度达到停止下单预设比例后，不能下单
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >停止下单：
                </span>
                <el-input
                  placeholder="信用金关闭额度"
                  v-model="user_form.forbid_order"
                  class="wid400"
                ></el-input>
                <span>&nbsp;%</span>
              </el-form-item>
            </div>
            <el-form-item class="flex_center" prop="open_registration">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">默认开启，关闭后新用户无法在商城注册</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >商城开放注册：
              </span>
              <el-switch
                v-model="user_form.open_registration"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
          <!-- 采购配置 -->
          <el-form
            :model="purchasing_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="220px"
            v-if="activeName == 5"
          >
            <el-form-item
              class="flex_center"
              prop="purchase_allow_add_sold_out"
            >
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，创建备货采购时可以添加下架的商品
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >备货采购允许添加下架商品：
              </span>
              <el-switch
                v-model="purchasing_form.purchase_allow_add_sold_out"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item class="flex_center" prop="purchase_goods_sort">
              <span slot="label"> 采购单商品排序： </span>
              <el-checkbox-group v-model="purchasing_form.purchase_goods_sort">
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 4)"
                  >按分类排序</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 4)"
                  >商品添加排序</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item class="flex_center" prop="purchase_return_audit">
              <span slot="label"> 采购退货需审核： </span>
              <el-switch
                v-model="purchasing_form.purchase_return_audit"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>
            <el-form-item
              class="flex_center"
              prop="purchase_return_check_inventory"
            >
              <span slot="label"> 采购退货需库存满足： </span>
              <el-switch
                v-model="purchasing_form.purchase_return_check_inventory"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>

            <el-form-item
              class="flex_center"
              prop="auto_calculate_entry_purchase"
            >
              <span slot="label"> 录单自动计算规则： </span>
              <el-checkbox-group
                v-model="purchasing_form.auto_calculate_entry_purchase"
              >
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 7)"
                  >自动小计并可反推单价</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20"
                  @change="checkboxGroup(1, 7)"
                  >自动小计</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <el-form-item class="flex_center" prop="export_reserve_detail">
              <span slot="label"> 导出预定明细: </span>
              <el-checkbox-group
                v-model="purchasing_form.export_reserve_detail"
              >
                <el-checkbox
                  :label="0"
                  class="marginRight0"
                  @change="checkboxGroup(0, 9)"
                  >显示用户名称</el-checkbox
                >
                <el-checkbox
                  :label="1"
                  class="marginLeft20 marginRight0"
                  @change="checkboxGroup(1, 9)"
                  >显示用户编码</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <div class="clearfix"></div>
            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
          <!-- 财务配置 -->
          <el-form
            :model="purchasing_form"
            :inline="false"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="220px"
            v-if="activeName == 6"
          >
            <el-form-item
              class="flex_center"
              prop="purchase_allow_add_sold_out"
            >
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    开启后，每天晚上23：00分，自动结算所有在线支付账单,<br />
                    退货单自动退到差额
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >在线支付账单自动结算：
              </span>
              <el-switch
                v-model="financial_form.auto_settle"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>

            <el-form-item class="flex_center" prop="empty_switch">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">详情咨询售后工程师</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >用户其他对账：
              </span>
              <el-switch
                v-model="financial_form.empty_switch"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>

            <el-form-item class="flex_center" prop="show_original_order_data">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">详情咨询售后工程师</div>
                  <i class="el-icon-question"></i> </el-tooltip
                >显示原单数据：
              </span>
              <el-switch
                v-model="financial_form.show_original_order_data"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>

            <el-form-item class="flex_center" prop="account_synchro_order">
              <span slot="label">
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="top"
                >
                  <div slot="content">
                    注释：开启后，在线支付、货到付款账单保存对账时<br />可选择是否同步原始订单
                  </div>
                  <i class="el-icon-question"></i> </el-tooltip
                >账单对账同步原始订单：
              </span>
              <el-switch
                v-model="financial_form.account_synchro_order"
                active-text="开"
                inactive-text="关"
                active-color="#03A98E"
                class="mainor_switch"
              ></el-switch>
            </el-form-item>

            <div class="clearfix"></div>

            <div class="newConBox_p100 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div
                  :class="[
                    'mainua_an newConBox ',
                    { on: searchBarFixed },
                    { marginLeft5: !searchBarFixed }
                  ]"
                >
                  <el-button type="primary" @click="preservation" v-repeatClick
                    >保存</el-button
                  >
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { uploadTxt } from "@/api/currency";
import { setting_info } from "@/api/global/globalSystem";
import { setting_company } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  computed: {
    ...mapGetters(["avatar"])
  },
  data() {
    return {
      uploadTxt,
      // 上传图片参数
      uploadparams: {
        store: "logo"
      },
      // 搜索
      overall_form: {
        show_member_code: true,
        order_number_generation_rule: [0],
        cost_entry_rule: [0],
        sorting_decimal_places: [0],
        show_sku_code: false
      },
      order_form: {
        order_audit: true,
        open_time: "",
        end_time: "",
        check_designated_inventory: true,
        allow_add_sold_out: false,
        use_recent_remark: true,
        order_goods_sort: [0],
        return_audit: true,
        new_order_voice_alert: ["/voice/myrecord.wav"],
        new_order_voice_switch: true,
        starting_price: 0, //商城起订金额
        base_delivery_fee: 0, //基础运费金额
        fare_delivery_fee: 0, //免运费订单金额
        send_time_back_days: 0
      },
      createTime: ["00:00:00", "00:00:00"],
      yuyi: [
        {
          name: "音乐1",
          url: "/voice/myrecord.wav"
        },
        {
          name: "音乐2",
          url: "/voice/ring_tone_one.mp3"
        },
        {
          name: "音乐3",
          url: "/voice/ring_tone_two.mp3"
        },
        {
          name: "音乐4",
          url: "/voice/ring_tone_three.wav"
        },
        {
          name: "音乐5",
          url: "/voice/ring_tone_four.wav"
        }
      ],
      autoplay: false,
      audioSrc: "",
      commodity_form: {
        show_sku_code: false,
        auto_watermark: false,
        look_goods_detail: false,
        offer_benchmark_price: [0],
        look_goods_detail: false,
        less_zero_forbid_sale: true
      },
      warehouse_form: {
        storage_audit: false,
        loss_stock: true,
        inventory_sheet_audit: true,
        reported_spills_audit: true,
        // is_batch: false
        //inventory_allocation_audit: true, 仓库调拨需审核
      },
      user_form: {
        register_audit: false,
        open_points: false,
        money_points_ratio: 1,
        register_pay_type: [2],
        credit_status: false,
        credit: "",
        credit_notice: "",
        forbid_order: "",
        open_registration: true
      },
      purchasing_form: {
        purchase_goods_sort: [0],
        purchase_return_audit: true,
        purchase_return_check_inventory: true,
        purchase_allow_add_sold_out: true,
        auto_calculate_entry_purchase: [0],
        export_reserve_detail: [0]
      },
      financial_form: {
        auto_settle: false,
        empty_switch: false,
        show_original_order_data: true,
        account_synchro_order: false
      },
      // 菜单切换
      activeName: "0",
      // 监听滚动
      searchBarFixed: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    ...mapActions("user", ["getInfo"]),
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 选中菜单
    handleClick(tab, event) {
      this.searchBarFixed = false;
      if (this.$refs["userListFrom"]) {
        this.$refs["userListFrom"].clearValidate();
      }
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      if (res.errcode == 0) {
        this.$message.success("上传成功");
      } else {
        this.$message.error(res.errmsg);
        fileList = [];
      }
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 500 / 1024;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 500kb!");
      }
      return isLt2M;
    },
    // 单选
    checkboxGroup(val, type) {
      if (type == 3) {
        this.order_form.new_order_voice_alert = [];
        this.order_form.new_order_voice_alert.push(val);
        this.audioSrc = "http://scc.caidj.com" + val;
        this.$refs.audio.pause();
        setTimeout(() => {
          this.$refs.audio.play();
        }, 300);
      } else if (type == 2) {
        this.order_form.order_goods_sort = [];
        this.order_form.order_goods_sort.push(val);
      } else if (type == 1) {
        this.overall_form.order_number_generation_rule = [];
        this.overall_form.order_number_generation_rule.push(val);
      } else if (type == 4) {
        this.purchasing_form.purchase_goods_sort = [];
        this.purchasing_form.purchase_goods_sort.push(val);
      } else if (type == 5) {
        this.overall_form.cost_entry_rule = [];
        this.overall_form.cost_entry_rule.push(val);
      } else if (type == 6) {
        this.commodity_form.offer_benchmark_price = [];
        this.commodity_form.offer_benchmark_price.push(val);
      } else if (type == 7) {
        this.purchasing_form.auto_calculate_entry_purchase = [];
        this.purchasing_form.auto_calculate_entry_purchase.push(val);
      } else if (type == 8) {
        // 注册支付方式：
        this.user_form.register_pay_type = [];
        this.user_form.register_pay_type.push(val);
      } else if (type == 9) {
        this.purchasing_form.export_reserve_detail = [];
        this.purchasing_form.export_reserve_detail.push(val);
        // 分拣保留小数：
        this.overall_form.sorting_decimal_places = [];
        this.overall_form.sorting_decimal_places.push(val);
      }
    },
    // 保存
    preservation() {
      this.$refs["userListFrom"].validate(valid => {
        if (valid) {
          // 全局配置
          let overall_form = JSON.parse(JSON.stringify(this.overall_form));
          overall_form.show_member_code = overall_form.show_member_code ? 1 : 0;
          overall_form.show_sku_code = overall_form.show_sku_code ? 1 : 0;
          overall_form.order_number_generation_rule = overall_form.order_number_generation_rule.join(
            ","
          );
          overall_form.cost_entry_rule = overall_form.cost_entry_rule.join(",");
          overall_form.sorting_decimal_places = overall_form.sorting_decimal_places.join(
            ","
          );
          // 订单配置
          let order_form = JSON.parse(JSON.stringify(this.order_form));
          order_form.open_time = this.createTime[0];
          order_form.end_time = this.createTime[1];
          order_form.check_designated_inventory = order_form.check_designated_inventory
            ? 1
            : 0;
          order_form.allow_add_sold_out = order_form.allow_add_sold_out ? 1 : 0;
          order_form.return_audit = order_form.return_audit ? 1 : 0;
          order_form.new_order_voice_switch = order_form.new_order_voice_switch
            ? 1
            : 0;
          order_form.use_recent_remark = order_form.use_recent_remark ? 1 : 0;
          order_form.order_audit = order_form.order_audit ? 1 : 0;
          order_form.new_order_voice_alert = order_form.new_order_voice_alert.join(
            ","
          );
          order_form.order_goods_sort = order_form.order_goods_sort.join(",");
          // 商品配置
          let commodity_form = JSON.parse(JSON.stringify(this.commodity_form));

          commodity_form.auto_watermark = commodity_form.auto_watermark ? 1 : 0;
          commodity_form.less_zero_forbid_sale = commodity_form.less_zero_forbid_sale
            ? 1
            : 0;

          commodity_form.look_goods_detail = commodity_form.look_goods_detail
            ? 1
            : 0;
          commodity_form.offer_benchmark_price = commodity_form.offer_benchmark_price.join(
            ","
          );
          // 库房配置
          let warehouse_form = JSON.parse(JSON.stringify(this.warehouse_form));
          warehouse_form.storage_audit = warehouse_form.storage_audit ? 1 : 0;
          warehouse_form.loss_stock = warehouse_form.loss_stock ? 1 : 0;
          warehouse_form.inventory_sheet_audit = warehouse_form.inventory_sheet_audit
            ? 1
            : 0;
          warehouse_form.reported_spills_audit = warehouse_form.reported_spills_audit
            ? 1
            : 0;
          // warehouse_form.is_batch = warehouse_form.is_batch ? 1 : 0;
          // 用户配置
          let user_form = JSON.parse(JSON.stringify(this.user_form));
          user_form.register_audit = user_form.register_audit ? 1 : 0;
          user_form.open_points = user_form.open_points ? 1 : 0;

          // user_form.register_pay_type = user_form.register_pay_type ? 1 : 0;
          user_form.register_pay_type = user_form.register_pay_type.join(",");
          user_form.credit_status = user_form.credit_status ? 1 : 0;
          user_form.open_registration = user_form.open_registration ? 1 : 2;

          // 采购配置
          let purchasing_form = JSON.parse(
            JSON.stringify(this.purchasing_form)
          );
          purchasing_form.purchase_goods_sort = purchasing_form.purchase_goods_sort.join(
            ","
          );
          purchasing_form.export_reserve_detail = purchasing_form.export_reserve_detail.join(
            ","
          );
          purchasing_form.purchase_return_audit = purchasing_form.purchase_return_audit
            ? 1
            : 0;
          purchasing_form.purchase_return_check_inventory = purchasing_form.purchase_return_check_inventory
            ? 1
            : 0;
          purchasing_form.purchase_allow_add_sold_out = purchasing_form.purchase_allow_add_sold_out
            ? 1
            : 0;

          purchasing_form.auto_calculate_entry_purchase = purchasing_form.auto_calculate_entry_purchase.join(
            ","
          );
          // 财务配置
          let financial_form = JSON.parse(JSON.stringify(this.financial_form));
          financial_form.auto_settle = financial_form.auto_settle ? 1 : 0;
          financial_form.empty_switch = financial_form.empty_switch ? 1 : 0;
          financial_form.show_original_order_data = financial_form.show_original_order_data
            ? 1
            : 0;
          financial_form.account_synchro_order = financial_form.account_synchro_order
            ? 1
            : 0;
          let data = Object.assign(
            apiUrl().name,
            this.activeName == 0 ? overall_form : "",
            this.activeName == 1 ? order_form : "",
            this.activeName == 2 ? commodity_form : "",
            this.activeName == 3 ? warehouse_form : "",
            this.activeName == 4 ? user_form : "",
            this.activeName == 5 ? purchasing_form : "",
            this.activeName == 6 ? financial_form : ""
          );
          setting_company(data).then(res => {
            if (res.errcode == 0) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.getInfo();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 基本信息
    setting_info() {
      let data = Object.assign(
        apiUrl().name
      );
      setting_info(data).then(res => {
        if (res.errcode == 0) {
          if (res.data.info) {
            this.overall_form.show_member_code =
              res.data.info.show_member_code == 1 ? true : false;
            this.overall_form.show_sku_code =
              res.data.info.show_sku_code == 1 ? true : false;
            if (
              res.data.info.order_number_generation_rule != "" &&
              res.data.info.order_number_generation_rule != null
            ) {
              this.overall_form.order_number_generation_rule = [];
              this.overall_form.order_number_generation_rule.push(
                parseInt(res.data.info.order_number_generation_rule)
              );
            }
            if (
              res.data.info.cost_entry_rule != "" &&
              res.data.info.cost_entry_rule != null
            ) {
              this.overall_form.cost_entry_rule = [];
              this.overall_form.cost_entry_rule.push(
                parseInt(res.data.info.cost_entry_rule)
              );
            }
            if (
              res.data.info.sorting_decimal_places != "" &&
              res.data.info.sorting_decimal_places != null
            ) {
              this.overall_form.sorting_decimal_places = [];
              this.overall_form.sorting_decimal_places.push(
                parseInt(res.data.info.sorting_decimal_places)
              );
            }
            this.order_form.order_audit =
              res.data.info.order_audit == 1 ? true : false;

            if (res.data.info.open_time) {
              this.order_form.open_time = res.data.info.open_time;
              this.order_form.end_time = res.data.info.end_time;

              this.createTime = [
                res.data.info.open_time,
                res.data.info.end_time
              ];
            }
            this.order_form.check_designated_inventory =
              res.data.info.check_designated_inventory == 1 ? true : false;
            this.order_form.allow_add_sold_out =
              res.data.info.allow_add_sold_out == 1 ? true : false;
            this.order_form.return_audit =
              res.data.info.return_audit == 1 ? true : false;
            this.order_form.use_recent_remark =
              res.data.info.use_recent_remark == 1 ? true : false;
            this.order_form.new_order_voice_switch =
              res.data.info.new_order_voice_switch == 1 ? true : false;

            this.order_form.starting_price = res.data.info.starting_price;
            this.order_form.fare_delivery_fee = res.data.info.fare_delivery_fee;
            this.order_form.base_delivery_fee = res.data.info.base_delivery_fee;
            this.order_form.send_time_back_days =
              res.data.info.send_time_back_days;

            if (
              res.data.info.order_goods_sort != "" &&
              res.data.info.order_goods_sort != null
            ) {
              this.order_form.order_goods_sort = [];
              this.order_form.order_goods_sort.push(
                parseInt(res.data.info.order_goods_sort)
              );
            }
            if (
              res.data.info.new_order_voice_alert != "" &&
              res.data.info.new_order_voice_alert != null
            ) {
              this.order_form.new_order_voice_alert = [];
              this.order_form.new_order_voice_alert.push(
                res.data.info.new_order_voice_alert
              );
            }

            this.commodity_form.auto_watermark =
              res.data.info.auto_watermark == 1 ? true : false;
            this.commodity_form.less_zero_forbid_sale =
              res.data.info.less_zero_forbid_sale == 1 ? true : false;

            this.commodity_form.look_goods_detail =
              res.data.info.look_goods_detail == 1 ? true : false;

            if (
              res.data.info.offer_benchmark_price != "" &&
              res.data.info.offer_benchmark_price != null
            ) {
              this.commodity_form.offer_benchmark_price = [];
              this.commodity_form.offer_benchmark_price.push(
                parseInt(res.data.info.offer_benchmark_price)
              );
            }
            this.warehouse_form.storage_audit =
              res.data.info.storage_audit == 1 ? true : false;
            this.warehouse_form.loss_stock =
              res.data.info.loss_stock == 1 ? true : false;
            this.warehouse_form.inventory_sheet_audit =
              res.data.info.inventory_sheet_audit == 1 ? true : false;
            this.warehouse_form.reported_spills_audit =
              res.data.info.reported_spills_audit == 1 ? true : false;
            // this.warehouse_form.is_batch =
            //   res.data.info.is_batch == 1 ? true : false;
            this.user_form.register_audit =
              res.data.info.register_audit == 1 ? true : false;
            this.user_form.open_points =
              res.data.info.open_points == 1 ? true : false;
            this.user_form.money_points_ratio =
              res.data.info.money_points_ratio;
            this.user_form.open_registration =
              res.data.info.open_registration == 1 ? true : false;
            // this.user_form.register_pay_type =
            //   res.data.info.register_pay_type == 1 ? true : false;
            if (
              res.data.info.register_pay_type != "" &&
              res.data.info.register_pay_type != null
            ) {
              this.user_form.register_pay_type = [];
              this.user_form.register_pay_type.push(
                parseInt(res.data.info.register_pay_type)
              );
            }
            this.user_form.credit_status =
              res.data.info.credit_status == 1 ? true : false;
            this.user_form.credit = res.data.info.credit;
            this.user_form.credit_notice = res.data.info.credit_notice;
            this.user_form.forbid_order = res.data.info.forbid_order;

            this.purchasing_form.purchase_return_audit =
              res.data.info.purchase_return_audit == 1 ? true : false;
            this.purchasing_form.purchase_return_check_inventory =
              res.data.info.purchase_return_check_inventory == 1 ? true : false;
            this.purchasing_form.purchase_allow_add_sold_out =
              res.data.info.purchase_allow_add_sold_out == 1 ? true : false;
            if (
              res.data.info.purchase_goods_sort != "" &&
              res.data.info.purchase_goods_sort != null
            ) {
              this.purchasing_form.purchase_goods_sort = [];
              this.purchasing_form.purchase_goods_sort.push(
                parseInt(res.data.info.purchase_goods_sort)
              );
            }
            if (
              res.data.info.auto_calculate_entry_purchase != "" &&
              res.data.info.auto_calculate_entry_purchase != null
            ) {
              this.purchasing_form.auto_calculate_entry_purchase = [];
              this.purchasing_form.auto_calculate_entry_purchase.push(
                parseInt(res.data.info.auto_calculate_entry_purchase)
              );
            }
            if (
              res.data.info.export_reserve_detail != "" &&
              res.data.info.export_reserve_detail != null
            ) {
              this.purchasing_form.export_reserve_detail = [];
              this.purchasing_form.export_reserve_detail.push(
                parseInt(res.data.info.export_reserve_detail)
              );
            }
            this.financial_form.auto_settle =
              res.data.info.auto_settle == 1 ? true : false;
            this.financial_form.empty_switch =
              res.data.info.empty_switch == 1 ? true : false;

            this.financial_form.show_original_order_data =
              res.data.info.show_original_order_data == 1 ? true : false;
            console.log(res.data.info.show_original_order_data);
            this.financial_form.account_synchro_order =
              res.data.info.account_synchro_order == 1 ? true : false;
          }
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }
  },
  created() {
    // 基本信息
    this.setting_info();
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.global_order {
  margin: 0 15px 0 15px;
  .mainua_form {
    .mainua_an {
      /deep/.el-form-item__content {
        margin-left: 0px !important;
      }
      .reset {
        background: $subActive;
        color: $menuText;
        border-color: $subActive;

        &:hover,
        &:focus {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }
}
.center {
  display: flex;
  align-items: center;
}
.points_switch_box {
  /deep/ .el-input-number--small {
    width: 90px;
    margin: 0 10px;
  }
}
</style>
